<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-sub-menu v-if="subItem.children?.length" :index="subItem.path">
      <template #title>
        <div class="title">
          <i class="iconfont" :class="subItem.meta.icon"></i>
          <p>{{ subItem.meta.title }}</p>
        </div>
      </template>
      <ManuItem :menuList="subItem.children" />
    </el-sub-menu>
    <el-menu-item
      v-else
      :index="subItem.path"
      @click="handleClickMenu(subItem)"
    >
      <template #title>
        <div class="title">
          <i class="iconfont" :class="subItem.meta.icon"></i>
          <p>{{ subItem.meta.title }}</p>
        </div>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts" generic="T extends Menu.MenuOptions">
import ManuItem from "./ManuItem.vue";

interface Props {
  menuList: T[];
}
defineOptions({ name: "MenuItem" });

defineProps<Props>();
const router = useRouter();

const handleClickMenu = (subItem: Menu.MenuOptions) => {
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  router.push(subItem.path);
};
</script>

<style scoped lang="less">
@import url("../index.less");
</style>
